<template>
  <div class="company">
    <div class="title">公司信息</div>
    <div class="logo">
      <img :src="jobMsg.company_logo" />
    </div>

    <div class="name">{{jobMsg.company_name}}</div>
    <div class="label">{{jobMsg.company_public}} | {{jobMsg.company_num}} | {{jobMsg.company_type}}</div>
    <div class="address">{{jobMsg.company_address}}</div>
    <div class="contacts">
      <div class="product">代表产品</div>
      <div class="product-item" v-for="item in jobMsg.company_product" :key="item.id">
        <div class="photo">
          <img :src="item.product_logo" />
        </div>
        <div class="name">{{item.product_name}}</div>
        <div class="desc">{{item.product_type}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailCompany",
  props: {
    jobMsg: Object
  }
};
</script>
<style lang="scss" scoped>
@import "~styles/varibles.styl";
.company {
  position: relative;
  top: 0.4rem;
  overflow: hidden;
  color: #000000;
  //   border: 1px solid red;
  background: #ffffff;
  font-size: 0.32rem;
  padding-bottom: 1rem;
  .logo {
    position: relative;
    top: 0.3rem;
    left: 0.5rem;
    width: 15vw;
    height: 15vw;
    // border: 1px solid red;
    img {
      width: 15vw;
      height: 15vw;
    }
  }
  .title {
    position: relative;
    top: 0.2rem;
    left: 0.5rem;
    font-size: 0.4rem;
  }
  .name {
    position: relative;
    top: -0.8rem;
    left: 2.5rem;
    font-size: 0.4rem;
  }
  .label {
    position: relative;
    top: -0.5rem;
    left: 2.5rem;
    font-size: 0.2rem;
    color: #777;
  }
  .address {
    position: relative;
    left: 2.5rem;
    font-size: 0.3rem;
    color: #555;
  }
  .contacts {
    position: relative;
    top: 0.5rem;
    left: 0.5rem;
    border-top: 0.05rem solid #eeeeee;
    .product {
      position: relative;
      top: 0.2rem;
    }
    .product-item {
      position: relative;
      margin-bottom: 0.05rem;
      .photo {
        position: relative;
        width: 15vw;
        height: 15vw;
        top: 0.4rem;
        // border: 1px solid red;
        img {
          width: 15vw;
          height: 15vw;
        }
      }
      .name {
        position: absolute;
        top: 0.5rem;
        left: 1.5rem;
        font-size: 0.3rem;
      }
      .desc {
        position: absolute;
        top: 1rem;
        left: 1.5rem;
        font-size: 0.2rem;
        padding: 0.05rem;
        border: 1px solid #dddddd;
      }
    }
  }
}
</style>